<template>
  <div id="emp">
    <!--这是搜索栏-->
    <div class="search">
      手机号码：
      <el-input v-model="input" placeholder="手机号码" style="width:200px"></el-input>
      员工姓名：
      <el-input v-model="input" placeholder="请输入员工姓名" style="width:200px"></el-input>
      <el-button type="primary" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
    </div>
    <!--这是操作按钮栏-->
    <div class="btnOption">
        <el-button type="danger" icon="el-icon-delete" class="el-button">批量删除</el-button>
      <el-button type="primary" icon="el-icon-plus" class="el-button">添加员工</el-button>
      <el-button type="warning" icon="el-icon-bottom" class="el-button">导出EXCEL</el-button>
      <el-button type="info" icon="el-icon-top" class="el-button"><a href="">读取EXCEL</a></el-button>
    </div>
    <!--数据显示栏-->
    <div class="data">
      <el-table
        border
        :data="tableData"
        style="width: 100%"
        height="350">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          fixed
          prop="date"
          label="日期"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="300">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="邮编"
          width="120">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页栏-->
    <div class="page">
      <el-pagination
        :page-size="2"
        :pager-count="5"
        :page-sizes="[5, 10,15, 20]"
        layout="total,slot,sizes, prev, pager, next"
        :total="100">
        <span>当前第1页</span>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'User',
  data () {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]
    }
  }
}
</script>

<style scoped>
  #emp {
    width: 1000px;
    border:1px solid #DFDFDF;
    margin: 0 auto;
  }
  /*搜索总布局*/
  .search{
    width: 1000px;
    text-align: center;
    margin-top: 15px;
  }
  /*操作按钮总布局*/
  .btnOption{
    width: 1000px;
    height: 42px;
    line-height: 42px;
    border: 1px solid #DFDFDF;
    background-color: #F5FAFE;
   /* border-radius: 5px;*/
    text-align: left;
    margin-top: 15px;
  }
  .el-button{
    height: 35px;
  }
  /*表格数据总布局*/
  .data{
    width: 1000px;
    background-color: burlywood;
    margin-top: 15px;
  }
  /*分页总布局*/
  .page {
    width: 1000px;
    text-align: left;
    margin-top: 15px;
  }
</style>
